<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
    <link rel="stylesheet" href="./swiper/swiper-bundle.min.css">
    <link rel="stylesheet" href="./font_kcrxw23h6ie/iconfont.css">
    <link rel="stylesheet" href="./goots.css">
    <link rel="stylesheet" href="./font_oly21ackr6/iconfont.css">
    
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
  
    <div id="user">
        <ul>
            <li> <span class="iconfont icon-200yonghu_yonghu"></span> 账号</li>

            <li id="carts"> <span class="iconfont icon-gouwudai_o"></span> <b>购物袋</b>
            <p>0</p>
            
            </li>

            <li> <span class="iconfont icon-wodeyouhuiquan"></span> </li>
            <li> <span class="iconfont icon-aixin"></span> </li>
            <li> <span class="iconfont icon-star"></span></li>
            <li> <span class="iconfont icon-lishijilu"></span></li>
            <li id="topT"> <span class="iconfont1 icon-shangyi">
              
            </span><div id="cart-con"></div></li>
        </ul>
        </ul>
    </div>
        <nav>
            <div>
                <p>地址</p>
            <ul>
              <li id="users" style="display: non;"></li>
                
              <li id="login" ><a href="./login.html"> 登录</a></li>
              <span>/</span>
              <li id="esc">退出</li>
              <li id="reg"><a href="./register.html"> 注册</a></li>
                <span>/</span>
                <li>签到有礼</li>
                <span>/</span>
                <li>我的订单</li>
                <span>/</span>
                <li>我的特卖</li>
                <span>/</span>
                <li>会员俱乐部</li>
                <span>/</span>
                <li>客户服务</li>
                <span>/</span>
                <li>手机版</li>
                <span>/</span>
                <li>更多</li>
            </ul>
            </div>
        </nav>
        <div id="box">
            
            <div id="top-logo">
                <a href="index.html"><img src="./img/logo.png" alt="" id="logo"></a>
                <span>
                    <a href=""></a>
                     <a href=""></a>
                      <a href=""></a>
                </span>
                <div id="input">
                    <input type="text" name="" id="">
                    <button>搜索</button>
                    
                </div>
                
                <div id="cart">
                    <p> 购物车</p>
                    <span class="iconfont icon-gouwudai_o" ></span>
                    <div id="arrs">0</div>
                </div>
                
            </div>
    
            <div id="top-nav">
                <a href="index.html">
                <ul>
                    
                    <li>商品分类</li>
                    <li>推荐</li>
                    <li>3折疯抢</li>
                    <li>唯品快抢</li>
                    <li>唯品奥莱</li>
                    <li>女装</li>
                    <li>鞋包</li>
                    <li>运动</li>
                    <li>母婴</li>
                    <li>美妆</li>
                    <li>男装</li>
                    <li>电器</li>
                    <li>内衣</li>
                    <li>更多</li>
                    
                </ul>
                </a>
            </div>

            



<div id="bg" style="background-image: url(./img/bg2.jpg);background-repeat: no-repeat;height: 300px;background-position-x: -260px;">
            <!-- <div class="swiper mySwiper">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <img
                      src="./img/lunbo1.jpg"
                    />
                  </div>
                  <div class="swiper-slide">
                    <img
                      src="./img/lunbo2.jpg"
                    />
                  </div>
                  <div class="swiper-slide">
                    <img
                      src="./img/lunbo3.jpg"
                    />
                  </div>
                 <div id="" style="z-index: 99;"><p>123</p></div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="swiper-scrollbar"></div>
                <div class="swiper-pagination"></div>
              </div> -->

            </div>    
            



            <h3>热销分类</h3>
            <div id="goots">
              <ul id="list">
                <li>
                  <img src="./img/shangpin1.jpg" alt="">
                  <h4>特卖价￥<span>123</span> </h4>
                  <p id="zhekou">4.2折</p>
                  <p id="pname">倩碧黄油</p>

                  <button id="btn">立即抢购</button>


                </li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
              

              </ul>
            </div>

</div>

<script src="./swiper/swiper-bundle.min.js"></script>

<script>
     var swiper = new Swiper(".mySwiper", {
slidesPerView: 1,
autoplay:true,
// loop : true,
effect : 'fade',
centeredSlides: false,
slidesPerGroupSkip: 1,
grabCursor: true,
keyboard: {
  enabled: true,
},
breakpoints: {
  769: {
    slidesPerView: 1,
    slidesPerGroup: 1,
  },
},
scrollbar: {
  el: ".swiper-scrollbar",
},
navigation: {
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
},
pagination: {
  el: ".swiper-pagination",
  clickable: true,
},
});



let ul = document.querySelector("#list")
let uid = 97027
        async function list() {
            let url = "http://jx.xuzhixiang.top/ap/api/allproductlist.php";
            let data = { pagesize: 20, pagenum: 0, uid }
            let r = await axios.get(url, { params: data });
            console.log(r.data);
            let arr = r.data.data.map(
                (v) => `
                <li>
                <a href='pdesc.html?pid=${v.pid}'>
                <img src="${v.pimg}" alt="">
                  <h4>特卖价￥<span>${v.pprice}</span> </h4>
                  <p id="zhekou">${v.pdesc}</p>
                  <p id="pname">${v.pname}</p>

                  <button id="btn">立即抢购</button>
                </li>
                </a>
                `
                );
                ul.innerHTML = arr.join("")
        } 
list() 
let btn = document.querySelector("#btn")
let lists = document.querySelector("#list")

let username = localStorage.getItem("username")
        console.log(username);

        let topT = document.querySelector("#topT")
    topT.onclick = function(e){
    console.log(e.screenX);
        document.documentElement.scrollTo({top:0,behavior:"smooth"})

}
        



let users = document.querySelector("#users")
console.log(users);
users.innerHTML = username 
let login = document.querySelector("#login")
let reg = document.querySelector("#reg")
let esc = document.querySelector("#esc")
login.style.display="none"
reg.style.display= "none"
if(username == null){
    login.style.display="block"
    reg.style.display= "block"
    esc.style.display = "none"
    console.log(11111);
}
esc.onclick = function(){
    localStorage.clear()
    location.reload()
    console.log(username);
}
console.log(username);

let carts = document.querySelector("#carts")
let cartCon = document.querySelector("#cart-con")
carts.onmouseover = function(){
  cartCon.style.display = 'block'
  
}
cartCon.onmouseout = function(){
  cartCon.style.display = 'none'
}





</script>

</body>
</html>